import React, { useSatte, useRef, useEffect } from "react";
import {
    IonContent,
    IonHeader,
    IonButton,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonLabel,
    IonListHeader,
    IonIcon
} from '@ionic/react';
import IndexBottomCom from '../../components/tabbar/indexBottom';
import MusicCom from "../../components/music/index";

import IndexStyle from "./index.module.scss";
const MineIndex = (props) => {
    const dargView = useRef(), dargViewP = useRef();
    useEffect(() => {
        // 获取DOM元素  
        let block = dargView.current;
        let oW, oH, MAXL = 99, MAXT = 99;
        block.addEventListener("touchstart", function (e) {
            let touches = e.touches[0];
            oW = touches.clientX - block.offsetLeft;
            oH = touches.clientY - block.offsetTop;
            document.addEventListener("touchmove", defaultEvent, false);
        }, false)

        block.addEventListener("touchmove", function (e) {
            let touches = e.touches[0];
            let oLeft = touches.clientX - oW;
            let oTop = touches.clientY - oH;
            if (oLeft < 0) {
                oLeft = 0;
            } else if (oLeft > document.documentElement.clientWidth - block.offsetWidth) {
                oLeft = (document.documentElement.clientWidth - block.offsetWidth);
            } else if (oLeft > MAXL || oLeft == MAXL) {
                oLeft = MAXL
            }
            if (oTop < 0) {
                oTop = 0;
            } else if (oTop > document.documentElement.clientHeight - block.offsetHeight) {
                oTop = (document.documentElement.clientHeight - block.offsetHeight);
            } else if (oTop > MAXT || oTop == MAXT) {
                oTop = MAXT;
            };
            console.log(oLeft,oTop);
            // let changeStr = "translate("+oLeft+"px, "+oTop+"px)"
            // block.style.transform=changeStr;
            block.style.left = oLeft + "px";
            block.style.top = oTop + "px";
        }, false);

        block.addEventListener("touchend", function () {
            document.removeEventListener("touchmove", defaultEvent, false);
        }, false);

        function defaultEvent(e) {
            e.preventDefault();
        }
    }, [])
    return (
        <IonPage>
            <IonContent>
                <IonHeader>
                    {/* 头部 */}
                </IonHeader>

                <MusicCom />
                <div className={`${[IndexStyle.dargViewP].join(" ")}`}>
                    <div ref={dargView} className={`${[IndexStyle.darg, IndexStyle.convex].join(" ")}`}>11</div>
                </div>
                <IndexBottomCom activeIndex={2} parent={props} />
            </IonContent>
        </IonPage>
    )
}
export default MineIndex;